<template>
  <div id="bindPhone_container">
    <div class="bindBankCard_container">
      <Return title="绑定银行卡"></Return>
      <div class="card_wrap">
        <div class="card_item" :style="{background: item.bank_name === '建设银行' ? `url(${require('../../assets/images/BuildBank.png')})` : `url(${require('../../assets/images/ChinaBank.png')})`}" v-for="(item, index) in cardInfo" :key="index">
          <div v-if="cardInfo.length !== 0">
            <h4 class="card_item_title">{{item.bank_name}}</h4>
            <h4 class="card_item_number">{{item.bank_number}}</h4>
          </div>
        </div>
        <div v-if="cardInfo.length === 0" class="card_add" @click="addBankCard">添加银行卡</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: "BindBankCard",
  data() {
    return {
        id: this.$store.state.userAbout.user_id || JSON.parse(localStorage.getItem('userInfo')).id
    };
  },
  mounted() {
    this.GetBankCard(this.id)
  },
  methods: {
    addBankCard() {
        this.$router.push({ name: 'AddBankCard'})
    },
    ...mapActions('userAbout', ['GetBankCard'])
  },
  computed: {
    ...mapState('userAbout', ['cardInfo'])
  }
};
</script>

<style lang="scss" scoped>
#bindPhone_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .bindBankCard_container {
    width: 348px;
    margin: auto;
    .card_wrap {
      .card_item {
        width: 100%;
        height: 191px;
        margin-bottom: 24px;
        background: url("../../assets/images/BuildBank.png");
        div {
          width: 100%;
          height: 100%;
          padding-top: 27px;
          padding-left: 30px;
          color: #fff;
          .card_item_title {
            font-size: 18px;
          }
          .card_item_number {
            font-size: 29px;
            margin-top: 70px;
          }
        }
      }
      .card_add {
        width: 100%;
        height: 40px;
        background-color: #32373d;
        border: 1px dashed #000;
        color: #fff;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        opacity: 0.6;
        &:hover {
          color: #fff;
          opacity: 0.9;
          cursor: pointer;
        }
      }
    }
  }
}
</style>